<template>
	<view>
		<view class="row">
			<view class=" txt">收货人姓名</view>
			<view class="" style="display: flex;align-items: center;">
				<input placeholder="请输入收货人姓名"  v-model="form.realname" style="text-align: right;"/>
			</view>
		</view>
		<view class="row">
			<view class=" txt">收货人电话</view>
			<view class="" style="display: flex;align-items: center;">
				<input maxlength="11" placeholder="请输入收货人电话"  v-model="form.phone" style="text-align: right;"/>
			</view>
		</view>
		<view class="row">
			<view class=" txt">收货地址</view>
			<view class="" style="display: flex;align-items: center;">
				<picker @change="bindPickerChange" mode="region">
					{{address}}
				</picker>
				<image src="../../static/image/right.png" mode="widthFix" class="icon"></image>
			</view>
		</view>
		<view class="row">
			<view class="txt">详细地址</view>
			 <input type="text"  placeholder="请输入详细地址"  v-model="form.address" style="text-align: right;"/>
		</view>
		<view class="row">
			<view class=" txt">默认地址</view>
			<view class="" style="display: flex;align-items: center;">
				<switch :checked="form.default" @change="switchChange"></switch>
			</view>
		</view>
		
		<view class="del" @click="del">删除</view>
		
		
		<view class="bottomFix" @click="sumbit">
			提交
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					address_id:'',
					realname: '',
					phone: '',
					province: '',
					city: '',
					county:'',
					address: '',
					default:'',
				},
				address:'请选择收货地址'
			}
		},
		onLoad(options) {
				console.log(options,77)
			if(options.id){
			  this.form.address_id=options.id;
			  this.getAddress()
			}
		},
		methods: {
			getAddress() {
				console.log(  this.form.address_id)
				this.request(
					'/user/address',
					{
						address_id:this.form.address_id
					},
					'post'
				).then(res => {
					var {
						realname,
						phone,
						province,
						city,
						county,
						address,
						default_addr
					} = res.data;
					
					
					this.form.realname = realname;
					this.form.phone = phone;
					this.form.province = province;
					this.form.city = city;
					this.form.county = county;
					this.address = province + city + county;
					this.form.address = address;
					this.form.default = default_addr ? true : false
					
				
					
				});
			
			},
			switchChange(e){
				let value=e.detail.value;
				this.form.default=value?1:0;
			},
			bindPickerChange(e){
				let detail=e.detail.value;
				this.address=detail.join(',');
				this.form.province=detail[0];
				this.form.city=detail[1];
				this.form.county=detail[2];
			},
			del(){
				this.request('user/addressDel', {
					address_id: this.form.address_id
				}, {}).then(res => {
					uni.showToast({
						title:"删除成功",
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							
						})
					},1500)
				}).catch(err => {})
			},
			sumbit(){
			   if(this.form.default){
				   this.form.default=1
			   }else{
				   this.form.default=0
			   }
				
				
				this.request(
					'/user/addressEdit',
					this.form,
					'post'
				).then(res => {
					if(res.code == 400){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						return
					}
					if(res.code==200){
						uni.showToast({
							title:"提交成功",
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},1500)
					}
					
				});
			}
		}
	}
</script>

<style>
	page{
	
	}
	.txt{
		font-weight: bold;
	}
	.row{
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		background: #fff;
		color: #646464;
		border-bottom: 1rpx solid #F1F1F1;
	}
	.icon{
		width: 12rpx;
		height: 12rpx;
		margin-left: 20rpx;
	}
	.bottomFix{
		width: 700rpx;
		border-radius: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #22b845;
		position: fixed;
		bottom: 50rpx;
		color: #fff;
		text-align: center;
		left: 30rpx;
	}
	.del{
		width:600rpx;
		background: #FDF3F3;
		
		text-align: center;
		border-radius: 10rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #E899A0;
		margin:20rpx auto;
	}
</style>